  <template>
  <div >
    <n-card size="small" class="column-card-left shadow-card">
      <template #header>
        <div style="display: flex; flex-direction: row; align-items: center">
          <span>综合分析</span>
          <icon-ic:baseline-keyboard-arrow-right style="margin-left: 5px;"/> <!-- 使用 Font Awesome 图标库作为示例 -->
        </div>
      </template>
      <template #header-extra>
        <n-radio-group value="quantity" size="small">
          <n-radio-button
              class="left-button"
              value="quantity"
              label="指标"
          />
        </n-radio-group>
      </template>
      <n-flex justify="space-between">
        <n-flex vertical style="align-items: center">
            <span style="font-size:30px;font-weight: bold; color: rgba(61,67,67,0.88)">物流商总数</span>
            <span style="font-weight: bold;font-size: 20px">{{logisticProviderQuantity}}个</span>
        </n-flex>
        <n-flex vertical style="align-items: center">
            <span style="font-size:30px;font-weight: bold; color: rgba(61,67,67,0.88)">物流商渠道数</span>
            <span style="font-weight: bold;font-size: 20px">4个</span>
        </n-flex>
        <n-flex vertical style="align-items: center">
          <span style="font-size:30px;font-weight: bold; color: rgba(61,67,67,0.88)">物流费用</span>
          <span style="font-weight: bold;font-size: 20px">{{logisticProviderCost}}元</span>
        </n-flex>
        <n-flex vertical style="align-items: center">
          <span style="font-size:30px;font-weight: bold; color: rgba(61,67,67,0.88)">完成物流订单数</span>
          <span style="font-weight: bold;font-size: 20px">{{logisticProviderOrderQuantity}}单</span>
        </n-flex>
        <n-flex vertical style="align-items: center">
            <span style="font-size:30px;font-weight: bold; color: rgba(61,67,67,0.88)">完成物流货物量</span>
            <span style="font-weight: bold;font-size: 20px">{{logisticProviderOrderCommodityQuantity}}个</span>
        </n-flex>
        <n-flex>
        </n-flex>
      </n-flex>
    </n-card>
    <div style="width: 100%; flex-direction: row; display: flex; justify-content: space-evenly">
    <n-card  size="small" class="second-column-card second-column-card-left shadow-card">
      <template #header>
        <div style="display: flex; flex-direction: row; align-items: center">
          <span>费用分析</span>
          <icon-ic:baseline-keyboard-arrow-right style="margin-left: 5px;"/> <!-- 使用 Font Awesome 图标库作为示例 -->
        </div>
      </template>


      <div ref="option1Container" style="width: 95%; height: 300px; margin-left: 10px; margin-top: 40px;"></div>
    </n-card>
    <n-card size="small" class="second-column-card second-column-card-right shadow-card">
      <template #header>
        <div style="display: flex; flex-direction: row; align-items: center">
          <span>物流商完成订单数（单）</span>
          <icon-ic:baseline-keyboard-arrow-right style="margin-left: 5px;"/> <!-- 使用 Font Awesome 图标库作为示例 -->
        </div>
      </template>
      <div ref="option4Container" style="width: 90%; height: 300px; margin-left: 10px;"></div>
    </n-card>
    </div>
    <div style="width: 100%; flex-direction: row; display: flex; justify-content: space-evenly">
      <n-card size="small" class="third-column-card third-column-card-left shadow-card">
        <template #header>
          <div style="display: flex; flex-direction: row; align-items: center">
            <span>已送达货量（个）</span>
            <icon-ic:baseline-keyboard-arrow-right style="margin-left: 5px;"/> <!-- 使用 Font Awesome 图标库作为示例 -->
          </div>
        </template>
        <div style="display: flex; flex-direction: row; justify-content: space-evenly">
          <div style="width: 48%;">
            <div ref="option2Container" style="width: 90%; height: 300px; margin-left: 10px;"></div>
          </div>
          <div style="width: 48%;">
            <div ref="option3Container" style="width: 90%; height: 300px; margin-left: 10px;"></div>
          </div>
        </div>
      </n-card>
      <n-card size="small" class="third-column-card third-column-card-right shadow-card">
        <template #header>
          <div style="display: flex; flex-direction: row; align-items: center">
            <span>物流渠道与物流情况</span>
            <icon-ic:baseline-keyboard-arrow-right style="margin-left: 5px;"/> <!-- 使用 Font Awesome 图标库作为示例 -->
          </div>
        </template>
        <template #header-extra>
          <n-radio-group value="quantity" size="small">
            <n-radio-button
                class="left-button"
                value="quantity"
                label="运输方式"
            />
          </n-radio-group>
        </template>
        <n-table :single-line="false" style="margin-top: 20px; font-size: 13px; align-items: center;text-align: center">
          <thead>
          <tr>
            <th class="th-left" style="width: 20%">运输方式</th>
            <th class="th-left">总物流订单数（个）<icon-zondicons:exclamation-outline style="margin-left: 5px;"/></th>
            <th class="th-left">物流总费用（元）<icon-zondicons:exclamation-outline style="margin-left: 5px;"/></th>
          </tr>
          </thead>
          <tbody>
          <tr>
            <td>{{channels[0]}}</td>
            <td>{{logisticProviderOrderQuantityByChannel[0]}}</td>
            <td>{{logisticProviderOrderPriceByChannel[0]}}</td>
          </tr>
          <tr>
            <td>{{channels[1]}}</td>
            <td>{{logisticProviderOrderQuantityByChannel[1]}}</td>
            <td>{{logisticProviderOrderPriceByChannel[1]}}</td>
          </tr>
          <tr>
            <td>{{channels[2]}}</td>
            <td>{{logisticProviderOrderQuantityByChannel[2]}}</td>
            <td>{{logisticProviderOrderPriceByChannel[2]}}</td>
          </tr>
          <tr>
            <td>{{channels[3]}}</td>
            <td>{{logisticProviderOrderQuantityByChannel[3]}}</td>
            <td>{{logisticProviderOrderPriceByChannel[3]}}</td>
          </tr>
          </tbody>
        </n-table>

      </n-card>
    </div>
  </div>
  </template>

<script setup>
  import {h, onMounted, reactive, ref} from 'vue'
  import * as echarts from 'echarts'
  import api from "@/api/admin.js";
  const logisticProviderCost = ref(0)
  const logisticProviderOrderQuantity = ref(0)
  const logisticProviderOrderCommodityQuantity = ref(0)
  const logisticsProviderInOrder = ref([])
  const logisticProviderOrderQuantityByName = ref([])
  const logisticProviderOrderCommodityQuantityByName = ref([])
  const channels = ["海派", "空派", "快递", "铁运"]
  const logisticProviderOrderCommodityQuantityByChannel = ref([])
  const logisticProviderOrderQuantityByChannel = ref([])
  const logisticProviderOrderPriceByChannel = ref([])
  const logisticsProviderCostInMonthToday = ref(null)
  const logisticsProviderCostInMonth = ref(null)
  const logisticsProviderQuantityInMonthToday = ref(null)
  const logisticsProviderQuantityInMonth = ref(null)
  const logisticProviderQuantity = ref(0)

  const defaultEmptyList = [0,0,0,0,0,0,0]
  const option1Container = ref(null)
  let option1Chart = null
  const option1  = ref({
   title: {
      text: ''
    },
    tooltip: {
      trigger: 'axis'
    },
    legend: {
      data: ['总运输费用', '总送达订单数', '今日运输费用', '今日送达订单数',]
    },
    grid: {
      left: '1%',
      right: '6%',
      bottom: '8%',
      top:'18%',
      containLabel: true
    },
    toolbox: {
      feature: {
        saveAsImage: {}
      }
    },
    xAxis: {
      type: 'category',
      name:'日期',
      boundaryGap: false,
      data: getLastSevenMonths()
    },
    yAxis: [{
      type: 'value',
      name: '订单数(单)',
    },
    {
      type: 'value',
      name: '费用(元)', // 可以给y轴命名
      position: 'right', // 明确指定位置在右侧
    }],
    series: [
      {
        name: '今日送达订单数',
        type: 'line',
        data: defaultEmptyList
      },
      {
        name: '今日运输费用',
        type: 'line',
        data: defaultEmptyList
      },
      {
        name: '总送达订单数',
        type: 'line',
        data: defaultEmptyList
      },
      {
        name: '总运输费用',
        type: 'line',
        data: defaultEmptyList
      }
    ]
  });
  const option2Container = ref(null)
  let option2Chart = null
  const option2 = ref({
      tooltip: {
        trigger: 'item'
      },
      legend: {
        top: '5%',
        left: 'center'
      },
      series: [
        {
          name: '运输方式',
          type: 'pie',
          radius: ['40%', '70%'],
          avoidLabelOverlap: false,
          label: {
            show: false,
            position: 'center'
          },
          emphasis: {
            label: {
              show: true,
              fontSize: 40,
              fontWeight: 'bold'
            }
          },
          labelLine: {
            show: false
          },
          data: logisticProviderOrderCommodityQuantityByChannel.value
        }
      ]
    })
  const option3Container = ref(null)
  let option3Chart = null
  const option3 = ref({
    tooltip: {
      trigger: 'item'
    },
    series: [
      {
        name: '物流商',
        type: 'pie',
        radius: ['40%', '70%'],
        avoidLabelOverlap: false,
        label: {
          show: false,
          position: 'center'
        },
        emphasis: {
          label: {
            show: true,
            fontSize: 40,
            fontWeight: 'bold'
          }
        },
        labelLine: {
          show: false
        },
        data: logisticProviderOrderCommodityQuantityByName.value
      }
    ]
  })
  const option4Container = ref(null)
  let option4Chart = null
  // prettier-ignore
  let dataAxis = ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'];
  // prettier-ignore
  let data = [12.3, 9.4, 11.4, 14.0, 8.5,7.2,10.3,8.3,11.5,10.7,8.3,7.9];
  let yMax = 15;
  let dataShadow = [];
  for (let i = 0; i < data.length; i++) {
    dataShadow.push(yMax);
  }
  const option4 = ref({
	  tooltip: {
		  trigger: 'item'
	  },
    title: {
      text: '',
    },
    xAxis: {
      data: logisticsProviderInOrder,
      axisLabel: {
        inside: true,
        color: '#fff'
      },
      axisTick: {
        show: false
      },
      axisLine: {
        show: false
      },
      z: 10
    },
    yAxis: {
      axisLine: {
        show: false
      },
      axisTick: {
        show: false
      },
      axisLabel: {
        color: '#999'
      }
    },
    dataZoom: [
      {
        type: 'inside'
      }
    ],
    grid: {
      left: '1%',
      right: '6%',
      bottom: '2  %',
      top:'25%',
      containLabel: true
    },
    series: [
      {
        type: 'bar',
        showBackground: true,
        itemStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: '#83bff6' },
            { offset: 0.5, color: '#188df0' },
            { offset: 1, color: '#188df0' }
          ])
        },
        emphasis: {
          itemStyle: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              { offset: 0, color: '#2378f7' },
              { offset: 0.7, color: '#2378f7' },
              { offset: 1, color: '#83bff6' }
            ])
          }
        },
        data: logisticProviderOrderQuantityByName.value
      }
    ]
  });
  // Enable data zoom when user click bar.
  const zoomSize = 6;

  const queryLogisticProviderCost = async () => {
	  try {
		  const res = await api.getLogisticProviderCost()
		  if(res.code === 200) {
			  logisticProviderCost.value = res.data
		  }
	  } catch (err) {
		  $message.error("获取物流费用失败！")
	  }
  }
  const getLogisticProviderOrderQuantity = async () => {
	  try {
		  const res = await api.getLogisticProviderOrderQuantity()
		  if(res.code === 200) {
			  logisticProviderOrderQuantity.value = res.data
		  }
	  } catch (err) {
		  $message.error("获取已送达物流订单总数失败！")
	  }
  }
  const getLogisticProviderOrderCommodityQuantity = async () => {
	  try {
		  const res = await api.getLogisticProviderOrderCommodityQuantity()
		  if(res.code === 200) {
			  logisticProviderOrderCommodityQuantity.value = res.data
		  }
	  } catch (err) {
		  $message.error("获取已送达货物总量失败！")
	  }
  }
  const getLogisticsProviderInOrder = async () => {
	  try {
		  const res = await api.getLogisticsProviderInOrder()
		  if(res.code === 200) {
			  res.data.map((item)=>{
				  logisticsProviderInOrder.value.push(item.name);
        })
		  }
	  } catch (err) {
		  $message.error("获取物流商失败！")
	  }
  }
  const getLogisticProviderOrderQuantityByName = async () => {
	  try {
			  for (let name of logisticsProviderInOrder.value) {
				  const res = await api.getLogisticProviderOrderQuantityByName({
					  params: {
						  name: name
					  }
				  })
          if(res.code === 200) {
						if(res.data !== 0) {
							logisticProviderOrderQuantityByName.value.push(res.data);
            }
          }
			  }
	  } catch (err) {
		  $message.error("获取物流订单数失败！")
	  }
  }
  const getLogisticProviderOrderCommodityQuantityByName = async () => {
	  try {
		  for (let name of logisticsProviderInOrder.value) {
			  const res = await api.getLogisticProviderOrderCommodityQuantityByName({
				  params: {
					  name: name
				  }
			  })
			  if(res.code === 200) {
				  logisticProviderOrderCommodityQuantityByName.value.push({
            value: res.data,
            name: name
          });
			  }
		  }
	  } catch (err) {
		  $message.error("获取物流订单数失败！")
	  }
  }
  const getLogisticProviderOrderCommodityQuantityByChannel = async () => {
	  try {
		  for (let channel of channels) {
			  const res = await api.getLogisticProviderOrderCommodityQuantityByChannel({
				  params: {
					  logisticsChannels: channel
				  }
			  })
        if(res.code === 200) {
	        logisticProviderOrderCommodityQuantityByChannel.value.push({
            value: res.data,
            name: channel
          })
        }
		  }
	  } catch (err) {
		  $message.error("获取物流货量数失败！")
	  }
  }
  const getLogisticProviderOrderQuantityByChannel = async () => {
	  try {
		  for (let channel of channels) {
			  const res = await api.getLogisticProviderOrderQuantityByChannel({
				  params: {
					  logisticsChannels: channel
				  }
			  })
			  if(res.code === 200) {
				  logisticProviderOrderQuantityByChannel.value.push(res.data);
			  }
		  }
	  } catch (err) {
		  $message.error("获取物流订单数失败！")
	  }
  }
  const getLogisticProviderOrderPriceByChannel = async () => {
	  try {
		  for (let channel of channels) {
			  const res = await api.getLogisticProviderOrderPriceByChannel({
				  params: {
					  logisticsChannels: channel
				  }
			  })
			  if(res.code === 200) {
				  logisticProviderOrderPriceByChannel.value.push(res.data);
			  }
		  }
	  } catch (err) {
		  $message.error("获取物流费失败！")
	  }
  }
  const getLogisticsProviderCostInMonthToday = async () => {
	  try {
			  const res = await api.getLogisticsProviderCostInMonthToday()
			  if(res.code === 200) {
				  logisticsProviderCostInMonthToday.value = res.data;
			  }
	  } catch (err) {
		  $message.error("获取物流费失败！")
	  }
  }
  const getLogisticsProviderCostInMonth = async () => {
	  try {
			  const res = await api.getLogisticsProviderCostInMonth()
			  if(res.code === 200) {
				  logisticsProviderCostInMonth.value = res.data;
			  }
	  } catch (err) {
		  $message.error("获取物流费失败！")
	  }
  }
  const getLogisticsProviderOrderQuantityInMonthToday = async () => {
	  try {
			  const res = await api.getLogisticsProviderOrderQuantityInMonthToday()
			  if(res.code === 200) {
				  logisticsProviderQuantityInMonthToday.value = res.data;
			  }
	  } catch (err) {
		  $message.error("获取物流订单数失败！")
	  }
  }
  const getLogisticsProviderOrderQuantityInMonth = async () => {
	  try {
			  const res = await api.getLogisticsProviderOrderQuantityInMonth()
			  if(res.code === 200) {
				  logisticsProviderQuantityInMonth.value = res.data;
			  }
	  } catch (err) {
		  $message.error("获取物流订单数失败！")
	  }
  }
  const getLogisticsProviderQuantity = async () => {
	  try {
		  const res = await api.logisticsProviderCount()
		  if(res.code === 200) {
			  logisticProviderQuantity.value = res.data;
		  }
	  } catch (err) {
		  $message.error("获取物流商总数失败！")
	  }
  }
  function getLastSevenMonths() {
	  let months = [];
	  let currentDate = new Date();
	  for (let i = 0; i < 7; i++) {
		  currentDate.setDate(1);
		  let year = currentDate.getFullYear();
		  let month = currentDate.getMonth() + 1; // 加 1 以符合月份通常的表示方式（1-12）
		  months.unshift(`${year}-${month.toString().padStart(2, '0')}`);
		  currentDate.setMonth(currentDate.getMonth() - 1);
	  }
	  return months;
  }
  const renderOption1 = async () => {
		try{
      await getLogisticsProviderCostInMonthToday()
			await getLogisticsProviderCostInMonth()
			await getLogisticsProviderOrderQuantityInMonthToday()
			await getLogisticsProviderOrderQuantityInMonth()

			option1.value.series[0].data = logisticsProviderCostInMonth.value
			option1.value.series[1].data = logisticsProviderQuantityInMonth.value
			option1.value.series[2].data = logisticsProviderCostInMonthToday.value
			option1.value.series[3].data = logisticsProviderQuantityInMonthToday.value
			option1Chart.setOption(option1.value)
    }catch (e) {
      console.log(e)
		}

  }
  onMounted( () => {
	  option1Chart = echarts.init(option1Container.value)
	  option1Chart.setOption(option1.value)
	  renderOption1();
		queryLogisticProviderCost();
	  getLogisticProviderOrderQuantity();
	  getLogisticProviderOrderCommodityQuantity();
	  getLogisticsProviderQuantity()
	  getLogisticsProviderInOrder().then(()=>{
		  getLogisticProviderOrderQuantityByName().then(()=>{
			  option4Chart = echarts.init(option4Container.value)
			  option4Chart.setOption(option4.value)
			  option4Chart.on('click', function (params) {
				  option4Chart.dispatchAction({
					  type: 'dataZoom',
					  startValue: dataAxis[Math.max(params.dataIndex - zoomSize / 2, 0)],
					  endValue:
						  dataAxis[Math.min(params.dataIndex + zoomSize / 2, data.length - 1)]
				  });
			  });
      })
		  getLogisticProviderOrderCommodityQuantityByName().then(()=>{
			  option3Chart = echarts.init(option3Container.value)
			  option3Chart.setOption(option3.value)
      })
    })
	  getLogisticProviderOrderCommodityQuantityByChannel().then(()=>{
		  option2Chart = echarts.init(option2Container.value)
		  option2Chart.setOption(option2.value)
    })
	  getLogisticProviderOrderQuantityByChannel()
	  getLogisticProviderOrderPriceByChannel()
  })
</script>
<style scoped>
    .column-card-left {
        margin-top: 10px;
        margin-left: 20px;
        width: 97%;
        padding-bottom: 20px;
    }
    .second-column-card {
        margin-top: 20px;
    }
    .second-column-card-left {
        width: 48%;
    }
    .second-column-card-right {
        width: 48%;
    }
    .shadow-card {
        box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.1); /* 添加阴影效果 */
        transition: box-shadow 0.3s ease; /* 阴影变化的过渡效果 */
    }
    /* 当鼠标悬停在卡片上时，可以加深阴影效果以增加交互性 */
    .shadow-card:hover {
        box-shadow: 0 3px 10px 0 rgba(0, 0, 0, 0.15);
    }
    .third-column-card {
        margin-top: 20px;
    }
    .third-column-card-left {
        width: 40%;
    }
    .third-column-card-right {
        width: 56%;
    }
    .fourth-column-card {
        margin-top: 20px;
    }
    .fourth-column-card-left {
        width: 42%;
    }
    .fourth-column-card-middle {
        width: 26%;
    }
    .fourth-column-card-right {
        width: 26%;
    }
    .button-with-icon {
        display: flex;
        align-items: center; /* 垂直居中 */
        justify-content: center; /* 水平居中，可以根据需要调整 */
    }
    .table-with-icon {
        margin-left: 2px;
        display: flex;
        align-items: center; /* 垂直居中 */
        justify-content: left; /* 水平居中，可以根据需要调整 */
    }
    .icon-material-symbols {
        font-family: "iconfont" !important;
        font-size: 16px;
        font-style: normal;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        margin-right: 5px;
    }
    .left-button {
        border-top-left-radius: 5px; /* 或者您想要的任何圆角大小 */
        border-bottom-left-radius: 5px;
    }

    .right-button {
        border-top-right-radius: 5px; /* 或者您想要的任何圆角大小 */
        border-bottom-right-radius: 5px;
    }
    .fourth-left-right-div {
        display: flex;
        flex-direction: row;
        align-items: center;
        border-radius: 5px;
        padding: 10px 20px;
    }
    .fourth-left-right-div-left {
        background-color: rgb(240, 245, 254);
        border: 1px solid rgb(148, 187, 255);
    }
    .fourth-left-right-div-right {
        background-color: rgb(253, 250, 255);
        border: 1px solid rgb(222, 173, 255);
    }
    .th-left {
        font-weight: bolder;
    }
    .th-right {
        width: 25%;
        font-weight: bolder;
        font-size: 14px;
        line-height: 22px;
        color: #000000a6;
        align-items: center;
    }
    .th-right-text{
        font-size: 20px;
        font-weight: 700;
        text-align: left;
    }
    .align-end {
        align-self: flex-end;
        margin-bottom: 10px; /* 或者根据你的设计调整 */
    }

    .align-start {
        align-self: flex-start;
        margin-top: 10px; /* 或者根据你的设计调整 */
    }
    .diagonal-line {
        position: relative;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: repeating-linear-gradient(
                30deg,
                #d9dbde,
                #d9dbde 1px,
                transparent 1px,
                transparent 50%
        );
        pointer-events: none; /* 确保直线不可点击 */
    }
    .last-line-text {
        font-size: 14px;
        font-weight: 700;
        line-height: 22px;
        margin-bottom: 8px;
        text-transform: capitalize;
        color: #000;
        cursor: pointer;
    }
</style>